<!-- 我的订单 -->
<template>
	<view>
		<view class="tui-header-box"
			:style="{ height: height + 'rpx', background: '#FFFFFF' }">
			<view class="logout" @click="logOut">
				退出门店
			</view>
			<view class="header-text">
				<view class="header-name">订单管理</view>
			</view>
		</view>
		<view class="top-box" :style="{top: height + 'rpx'}">
			<view class="top-list">
				<view class="tab-1" :class="topIndex==index?'tab-1-active':''" v-for="(item,index) in topList"
					:key="index" @click="topListClick(index)">{{item}}
				</view>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="order-list-1" v-for="(item,index) in orderList" :key="index">
				<view class="order-list-info">
					<view class="order-shopname">
						<span class="shop-icon">
							<text>{{item.physical_name.substring(0,1)}}</text>
						</span>{{item.physical_name}}
					</view>
					<view class="order-stutas2">{{item.order_state_txt}}</view>
				</view>
				<view class="order-list-2" @click="toDetails(item.order_id)">
					<view class="order-list-icon">
						<image :src="item.goods_list[0].goods_image_url"></image>
					</view>
					<view class="order-info">
						<view class="order-name">{{item.goods_list[0].goods_name}}</view>
						<view class="order-text-list">
							<view class="order-price">{{'¥'+item.goods_list[0].goods_price}}</view>
							<view class="order-count">{{'x'+item.goods_list[0].goods_num}}</view>
						</view>
					</view>
				</view>
				<view class="order-list-but" v-if="item.if_cancel||item.if_deliver">
					<view class="look-but" v-if="item.if_cancel" @click="closeOrder(item.order_id)">
                        取消订单
					</view>
					<view class="look-but" v-if="item.if_deliver" @click="checkLoglist(item.order_id)">
						查看物流
					</view>
				</view>
			</view>
		</view>
		<uni-popup type="center" ref="reason">
			<view class="popup-open">确认取消该订单吗？</view>
			<input class="reason-input" v-model="reasonText" type="text" placeholder="请输入取消原因" />
			<view class="buttons">
				<view style="color: #000;" @click="close">取消</view>
				<view style="color: #fff;background-color: #ff0000ba;" @click="confirm">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topList: ["全部", "待付款", "待发货", "待收货", "已完成"],
				topIndex: 0,
				curpage: 1,
				state_type: "",
				hasmore: false, //是否有下一页
				orderList: [], //订单列表
				reasonText: '',
				info: '',
				height: 88,
			}
		},
		onShow() {
			this.getOrderList()
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.height=res.statusBarHeight+88
					// #ifndef H5
					this.height=res.statusBarHeight+120
					// #endif
				}
			});
		},
		onBackPress(res) {
			// 【安卓】禁止左滑、物理返回
			return res.from === 'backbutton'
		},
		onReachBottom() { //下拉加载
			if (this.hasmore) {
				uni.showLoading({
					title: "加载中"
				})
				this.curpage++
				this.getOrderList()
		
			} else {
				uni.showLoading({
					title: "没有更多数据了",
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		methods: {
			//登出
			logOut() {
				uni.showModal({
					content: '确认登出吗？',
					confirmColor: '#F54E40', //删除字体的颜色
					success: res => {
						if (res.confirm) {
							this.Yes()
						}
					}
				});
			},
			Yes() {
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/shop/login/login"
					});
				}
				url = "/mobile/index.php?act=physical-logout&op=index";
				let that = this
				this.$util.request({
					url: url,
					method: 'post',
					data: {}
				}).then(res => {
					if (res.error_code == 0) {
						uni.removeStorageSync("key")
						uni.removeStorageSync("shop_userinfo")
						uni.removeStorageSync("api_member_name")
						uni.removeStorageSync("api_member_id")
						uni.removeStorageSync("openid")
						uni.showToast({
							title:'登出成功',
							icon:"success"
						})
						setTimeout(() => {
							uni.redirectTo({
								url: "/mainA/login/login"
							});
						}, 500)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			getOrderList() { //获取我的订单列表
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/shop/login/login",
					});
				}
				url = "/mobile/index.php?act=physical-order&op=index";
				let that = this
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						state_type: that.state_type,
						order_sn: "",
						curpage: that.curpage
					}
				}).then(res => {
					if (res.error_code == 0) {
						//更新页面数据
						if (that.hasmore) {
							that.orderList = that.orderList.concat(res.datas.list)
						} else {
							that.orderList = []
							that.orderList = res.datas.list
						}
						that.hasmore = res.datas.paged.hasmore
						that.$set(that.orderList)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			topListClick(index) { //点击筛选
				let that = this
				if (index != undefined) { //清空上一轮数据
					that.curpage = 1
					that.orderList = []
					that.topIndex = index
				}
				switch (that.topIndex) { //顶部导航栏切换
					case 0:
						that.state_type = ""
						break;
					case 1:
						that.state_type = "state_new"
						break;
					case 2:
						that.state_type = "state_pay"
						break;
					case 3:
						that.state_type = "state_send"
						break;
					default:
						that.state_type = "state_success"
						break;
				}
				this.getOrderList()
			},
			toDetails(id) { //去往订单详情页面
				uni.navigateTo({
					url: `/shop/good/orderDetails?order_id=${id}`
				})
			},
			checkLoglist(id) { //查看物流
				uni.navigateTo({
					url: `/shop/good/checkLoglist?order_id=${id}`
				})
			},
			closeOrder(id) { //取消订单
			   this.order_id=id
				this.$refs.reason.open()
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/shop/login/login",
					});
				}
			},
			close() {
				this.reasonText=''
				this.$refs.reason.close()
			},
			//取消订单
			confirm() {
				let url = '';
				let that = this
				url = "/mobile/index.php?act=physical-order&op=close";
				that.$util.request({
					url: url,
					method: 'post',
					data: {
						order_id: that.order_id,
						reason: that.reasonText
					}
				}).then(res => {
					if (res.error_code == 0) {
						that.orderList = []
						//更新页面数据
						setTimeout(() => {
							that.getOrderList()
							that.$set(that.orderList)
							that.reasonText=''
							that.$refs.reason.close()
						}, 200)
						console.log('操作成功')
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}
	.tui-header-box {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 9;
		display: flex;
		align-items: center;
		align-items: flex-end;
	
		.header-text {
			width: 100%;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: center;
	
			.header-name {
				font-size: 36rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #000000;
			}
		}
	
		.logout {
			position: absolute;
			bottom: 0rpx;
			left: 40rpx;
			font-size: 30rpx;
		}
	}
	.box {
		height: 1200rpx;
		overflow: hidden;
	}

	.top-box {
		position: fixed;
		left: 0;
		right: 0;
		background: #FFFFFF;
		z-index: 9;

		.search-box {
			background: #FFFFFF;
		}

		.top-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 44rpx;

			.tab-1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.tab-1-active {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #E96A1D;
				position: relative;
			}

			.tab-1-active::after {
				position: absolute;
				bottom: -4rpx;
				left: 20%;
				right: 20%;
				height: 2rpx;
				content: '';
				background: #E96A1D;
				border-radius: 6rpx;
			}
		}
	}


	.goods-list-box {
		padding: 130rpx 30rpx 30rpx;
		margin-top: 88rpx;
		/* #ifndef H5 */
		margin-top: 160rpx;
		/* #endif */

		.order-list-1 {
			background-color: #FFF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			.order-list-1-subscript {
				width: 130rpx;
				height: 130rpx;

				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
			}

			.order-list-info {
				display: flex;
				justify-content: space-between;

				.order-shopname {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
					display: flex;
					flex-direction: row;
					align-items: center;

					.shop-icon {
						width: 38rpx;
						height: 38rpx;
						background: linear-gradient(180deg, #EA8C1E 0%, #E84A1D 100%);
						opacity: 1;

						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						margin-right: 10rpx;

						text {
							transform: scale(0.8);
							font-family: 500;
						}

					}
				}

				.order-stutas {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #E96A1D;
				}

				.order-stutas2 {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
				}
			}

			.order-list-2 {
				display: flex;
				margin-top: 20rpx;
				padding-bottom: 30rpx;
				border-bottom: 2rpx solid #EEEEEE;

				.order-list-icon {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 5rpx;
					}
				}

				.order-info {
					margin-left: 30rpx;
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.order-name {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}

					.order-name-sp-list {
						.order-name-sp {
							height: 32rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #909090;
						}
					}

					.order-text-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 13rpx;

						.order-price {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E96A1D;
						}

						.order-count {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}

					.order-text {
						position: absolute;
						bottom: 43rpx;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;

						.order-price {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E96A1D;
						}

						.order-score {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #909090;
						}

						/deep/ .uni-rate {
							margin-top: 10rpx;
						}

						.order-score-icon {
							display: flex;
							align-items: center;
						}
					}

					.order-text2 {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.order-count {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}

						.order-num {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}
				}
			}

			.order-text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;
				margin-bottom: 16rpx;
			}
		}

		.order-list-but {
			// margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			// border-top: 2rpx solid #EEEEEE;
			padding-top: 30rpx;

			.look-but-1 {
				width: 160rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;
				border: 2rpx solid #E96A1D;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #E96A1D;
			}

			.look-but {
				width: 160rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;
				border: 2rpx solid #323232;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;
				margin-left: 20rpx;
			}

			.grounding {
				display: flex;
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.delete {
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	/deep/ .uni-popup__wrapper-box {
		width: 540rpx;
		height: 280rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex !important;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.popup-open {
		font-size: 34rpx;
		text-align: center;
		margin-top: 20rpx;
		color: #000;
	}

	.reason-input {
		border: 1px solid;
		width: 85%;
		margin: 20rpx 0;
		padding: 10rpx;
		color: #000;
		font-size: 30rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 90%;
		margin-top: 20rpx;

		view {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			height: 70rpx;
			width: 45%;
			background-color: #EEEEEE;
			border-radius: 40rpx;
		}
	}
</style>